<template>
  <div class="">
    <!-- 头部组件 -->
    <MyHeader @searchChange="searchChange"></MyHeader>
    <!-- 历史记录 -->
    <History
      v-if="$store.state.objList.length && obj.length == 0"
      @searchChange="searchChange"
    ></History>
    <!-- contetn -->
    <div v-else class="content">
      <ul>
        <li v-for="(v, i) in obj" :key="i">{{ v.goods_name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import MyHeader from "../components/myHeader.vue";
import axios from "axios";
import { ref } from "vue";
import History from "../components/history.vue";
export default {
  setup() {
    let obj = ref([]);
    // 搜索条件
    function searchChange(val) {
      axios
        .get(
          `https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch?query=${val}`
        )
        .then((res) => {
          obj.value = res.data.message;
        });
    }

    return { obj, searchChange };
  },
  components: { MyHeader, History },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  li {
    margin: 10px 0;
  }
}
</style>
